import React, {useState, useEffect,} from 'react'
import {connect,} from 'react-redux'
import './top-star.css'

import TabsWithGoBackLayout from "../../layouts/TabsWithGoBackLayout/TabsWithGoBackLayout"
import TabWithCustomUnderline from "../../layouts/TabWithCustomUnderline/TabWithCustomUnderline"
import CustomButton from "../../shared-components/CustomButton/CustomBotton"
import GrayBorderRoundAvatar from "../../shared-components/GrayBorderRoundAvatar/GrayBorderRoundAvatar"
// import {starRank} from "../../utils/mockdata"

import TopOneIcon from "../../res/images/web/shared/fans-top-1.png"
import TopTwoIcon from "../../res/images/web/shared/fans-top-2.png"
import TopThreeIcon from "../../res/images/web/shared/fans-top-3.png"
import {WhiteSpace} from "antd-mobile"


const TopStarContainer = props => {
    const {
        history,
        isLogin,
        doAddFollow,
        doCancelFollow,
        doFetchStarRankList,
        doFetchStarRankListNoToken,
    } = props

    const [TopStars,] = useState([])

    useEffect(() => {
        const t = 1
        !isLogin && doFetchStarRankListNoToken({t,})
        isLogin && doFetchStarRankList({t,})
    }, [])

    const topTabs = [{title: '明星主播榜',}, {title: '富豪实力榜',},]
    const subTabs = [{title: '周榜',}, {title: '总榜',},]

    const addFollow = payload => {
        doAddFollow(payload)
        const t = 1
        doFetchStarRankList({t,})
    }

    const cancelFollow = payload => {
        doCancelFollow(payload)
        const t = 1
        doFetchStarRankList({t,})
    }

    const TopStarsTemplate = (TopStars.map((star, index) => {
        const m = {
            0: TopOneIcon,
            1: TopTwoIcon,
            2: TopThreeIcon,
        }

        const rankNo = m[index] ? <img src={m[index]} alt=''/> : <span>{index + 1}</span>

        const uid = localStorage.getItem('userid')
        const tuid = star.id || '-1'

        const btn = star.followed
            ? <CustomButton
                inline='true'
                size='xs'
                onClick={(e) => cancelFollow({uid, tuid,})}
            >取消关注</CustomButton>
            : <CustomButton
                inline='true'
                size='xs'
                bg='#fff'
                color='#333'
                border='1px solid rgba(51,51,51,0.1)'
                onClick={(e) => addFollow({uid, tuid,})}
            >关注ta</CustomButton>
        return (
            <div
                key={index}
                className='flex top-star-rank-item-ctn'
            >
                <div className='top-star-rank-item-no'>
                    {rankNo}
                </div>
                <div key={index} className='flex-space-between-align-center top-star-rank-item'>
                    <div className='flex-space-between-align-center'>
                        <div
                            onClick={() => history.push('./live/1')}
                            className='flex-space-between-align-center top-star-rank-item-info'
                        >
                            <GrayBorderRoundAvatar
                                avatarUrl={star.iconUrl}
                                size='s'
                            />
                            <span>{star.name}</span>
                        </div>
                    </div>
                    <div>
                        {btn}
                    </div>
                </div>
            </div>
        )
    }))

    return (
        <TabsWithGoBackLayout
            history={history}
            tabs={topTabs}
            noUnderline='true'
            tabBarActiveTextColor='#FA7268'
            tabBarInactiveTextColor='#333333'
            prefixCls='top-star-tab'
        >

            <TabWithCustomUnderline
                tabs={subTabs}
                prefixCls='top-star-sub-tab'
            >

                <div>
                    <WhiteSpace/>
                    {TopStarsTemplate}
                </div>

            </TabWithCustomUnderline>

        </TabsWithGoBackLayout>
    )
}

const mapState = state => ({
    isLogin: state.global.isLogin,
    starRankList: state.live.starRankList,
})

const mapDispatch = dispatch => ({
    doFetchStarRankList: (payload) => dispatch.live.doFetchStarRankList(payload),
    doFetchStarRankListNoToken: (payload) => dispatch.live.doFetchStarRankListNoToken(payload),
    doAddFollow: (payload) => dispatch.user.doAddFollow(payload),
    doCancelFollow: (payload) => dispatch.user.doCancelFollow(payload),
})

export default connect(mapState, mapDispatch)(TopStarContainer)
